<!--
 * Copyright ©
 * #  
 * @author: zw
 * @date: 2021-11-26 
 -->

<template>
    <basicHeader :data="['系统管理', '用户管理']"></basicHeader>
    <el-card>
        <el-form :inline="true" :model="form" @keyup.enter="getDataList()" >
          <el-form-item>
            <el-input v-model="form.username" placeholder="用户名" clearable />
          </el-form-item>
          <el-form-item>
            <el-button @click="getDataList()">查询</el-button>
            <el-button type="primary" v-if="isAuth('sys:user:save')" @click="addOrUpdateHandle()">新增</el-button>
            <el-button type="danger" v-if="isAuth('sys:user:delete')" @click="deleteHandle()" disabled >批量删除</el-button >
          </el-form-item>
        </el-form>

        <el-table :data="table.tabelData.slice(( pagination.pageIndex - 1 ) * pagination.pageSize, pagination.pageIndex * pagination.pageSize )" border :height="table.tableHeight" v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%">
          <el-table-column type="selection" align="center" width="50" />
          <el-table-column type="index" :index="index => index + (pagination.pageIndex - 1) * pagination.pageSize + 1" align="center" width="80" label="序号"/>
          <el-table-column prop="username" align="center" label="用户名" />
          <el-table-column prop="email" align="center" label="邮箱" />
          <el-table-column prop="mobile" align="center" label="手机号" />
          <el-table-column prop="createTime" align="center" width="180" label="创建时间" />
          <el-table-column  prop="status" align="center" label="状态" >
            <template #default="scope">
              <el-tag v-if="scope.row.status === 0" size="small" type="danger">禁用</el-tag>
              <el-tag v-else size="small">正常</el-tag>
            </template>
          </el-table-column>
          <el-table-column fixed="right" align="center" width="180" label="操作" >
            <template #default="scope">
              <el-button size="mini" v-if="isAuth('sys:user:update')" @click="addOrUpdateHandle(scope.row.userId)">修改</el-button>
              <el-button type="danger" v-if="isAuth('sys:user:delete')" size="mini" @click="deleteHandle(scope.row.userId, scope.row.username)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination :options="pagination" @sizeChange="size => pagination.sizeChange.call(pagination, size)" @currentChange="page => pagination.currentChange.call(pagination, page)" />
        <!-- <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update> -->
    </el-card>
</template>

<script lang="js">
import { defineComponent, reactive, toRefs, computed, onMounted, onUnmounted } from 'vue'
import { useInstance } from "@/common";
export default defineComponent({
  name: 'user',
  setup(props, {emit, slots}) {
    const { $message} = useInstance();
    const state = reactive({
      form: {
        username: ''
      },
      table: {
        tableHeight: '',
        tabelData: []
      },
      pagination: {
        pageIndex: 1,
        pageSize: 10,
        total: 0,
        sizeChange(newSize) {
          this.pageSize = newSize;
        },
        currentChange(newPage) {
          this.pageIndex = newPage;
        }
      }
    });
    
    const isAuth = computed(() => () => true);
    const getDataList = () => { }
    const addOrUpdateHandle = () => { }
    const deleteHandle = () => { }
    const getTableHeight = () => {
				const tableH = 233;
				const tableHeightDetil = window.innerHeight - tableH;
				state.table.tableHeight = window.innerHeight - tableH;
			}
    getTableHeight();
    onMounted(() => {
      state.table.tabelData = new Array(100).fill({username: '张三', email: '133@zz.asd', mobile: 13343321132, createTime: new Date().toLocaleString(), status: 1});
      state.pagination.total = 100;
      window.addEventListener('resize', getTableHeight);
    });
    onUnmounted(() => {
      window.removeEventListener('resize', getTableHeight);
    })
   return {
     ...toRefs(state),
     isAuth,
     getDataList,
     addOrUpdateHandle,
     deleteHandle
    }
   }
})
</script>

<style lang="scss" scoped>

.el-table {
  .el-checkbox {
    height: 25px;
  }
}
</style>
